Heya, I am wanting to convert my character sheet from the legacy style to CSE. I have examined the Wiki and the Help section and found them to be not all that helpful on the topic of properly converting. From what I am understanding, I need to strip out ALL the "sheet-" prefix from both the html and the css and then set it to CSE. Is that about the size of it, or is there more to it than that?
you do not need to strip out the sheet- prefix, you just need to make sure that your html and css classes match as CSE does not add the sheet- prefix to the html elements like legacy did. If you were already putting sheet- prefixes in your html, then you can just leave them as is and your css mostly as is.
The big complication from switching to CSE is that the specificity of your css declarations is going to change because they are no longer auto prepended with .charsheet. The easy way to ensure your CSS rules maintain the same specificity is to just manually prepend all your rules with .charsheet. If you're using just regular CSS, this is going to be a pain; SCSS makes this much easier at the cost of a little complexity. You may run into other hurdles specific to your sheet, but those are the two general pain points with switching to CSE.
And, remember rolltemplate html and styling does NOT change at all as it is still using legacy sanitization regardless of what your sheet is using. This also means that any fonts you are importing from google fonts must still use the legacy compatible import url as described in the wiki.
Well, my character sheet actually converted over fairly nicely. There are a bunch of issues with repeating sections not holding their proper styles. However, the major issue is that one style is not really applying to the character sheet. I can see it in the css file, but it doesnt even show up when I inspect the code on the page.
If i edit the style on the page using the console editor, the style actually seems to function as it should but the problem is I don't really know why. I am guessing their is a hierarchy thing (my biggest hangup with css, I am horrible with finding the hierarchy of an element). So... Perhaps you might give me your thoughts...
CSS code:
/* Main Styles */
.charsheet {
background-image: url(http://i.imgur.com/5GbMHfg.png);
font-family : Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size : 14px;
}
.charsheet .wrapper h3 {
color : black;
padding : 3px;
margin-bottom : 5px;
font-size : 18px;
font-weight : bold;
font-family : inherit;
text-transform: uppercase;
text-align : center;
}
.charsheet .wrapper textarea {
display : inline-block;
border : 1px solid #aaa;
padding : 2px;
height : 24px;
width : 100%;
font-size : 14px;
font-family : inherit;
line-height : 16px;
font-weight : normal;
margin : 0;
color : #555;
background-color : white;
vertical-align : middle;
cursor : auto;
letter-spacing : normal;
word-spacing : normal;
text-transform : none;
text-indent : 0px;
text-shadow : none;
text-align : start;
-webkit-rtl-ordering: logical;
-webkit-user-select : text;
box-shadow : inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition : border linear .2s, box-shadow linear .2s;
border-radius : 3px;
writing-mode : horizontal-tb;
-webkit-writing-mode: horizontal-tb;
}
.charsheet .wrapper input,
.charsheet .wrapper select,
.charsheet .wrapper input[type="number"] {
/* display : inline-block; */
border-bottom : 1px dotted gray;
border-top : none;
border-left : none;
border-right : none;
padding : 2px;
height : 24px;
width : 100%;
font-size : 14px;
font-family : inherit;
line-height : 16px;
font-weight : normal;
margin : 0;
color : #555;
background-color : transparent;
vertical-align : middle;
cursor : auto;
letter-spacing : normal;
word-spacing : normal;
text-transform : none;
text-indent : 0px;
text-shadow : none;
text-align : start;
-webkit-rtl-ordering: logical;
-webkit-user-select : text;
box-shadow : inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition : border linear .2s, box-shadow linear .2s;
border-radius : 3px;
writing-mode : horizontal-tb;
-webkit-writing-mode: horizontal-tb;
}
.charsheet .wrapper .small-label2 input,
.charsheet .wrapper .small-label2 input[type="number"],
.charsheet .wrapper .small-label2 input[type="text"],
.charsheet .wrapper .small-label2 select {
background-color: white;
}
.charsheet .wrapper input:not([type='checkbox']) {
-webkit-appearance: textfield;
}
.charsheet .wrapper input[type="checkbox"] {
height: 13px;
width : 13px;
color : #555;
border: 1px solid #aaa;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear .2s, box-shadow linear .2s;
}
.charsheet .wrapper input[disabled],
.charsheet .wrapper select[disabled],
.charsheet .wrapper textarea[disabled],
.charsheet .wrapper input[readonly],
.charsheet .wrapper select[readonly],
.charsheet .wrapper textarea[readonly] {
background-color: #cccccc !important;
border-color : #aaa;
cursor : not-allowed;
pointer-events : none;
}
.charsheet .wrapper textarea {
width : 98%;
height : 80px;
line-height: 16px;
}
.charsheet .wrapper label {
width : unset;
font-size : 14px;
text-align : left;
font-weight : 600;
height : 24px;
line-height : 24px;
vertical-align: middle;
}
.charsheet .wrapper .3colrow .col {
width : calc(40% - 9px) !important;
margin-right: 5px !important;
}
.charsheet .wrapper .3colrow .col:nth-child(2) {
width : calc(20% - 9px) !important;
margin-right: 5px;
}
.charsheet .wrapper .3colrow .col:last-child {
margin-right: 0 !important;
}
.charsheet .wrapper .2colrow .col {
width : calc(50% - 3px) !important;
margin-right: 2px !important;
}
.charsheet .wrapper .2colrow .col:last-child {
margin-right: 0 !important;
}
.charsheet .wrapper .1colrow .col {
width : calc(100% - 3px) !important;
margin-right: 0 !important;
}
HTML code:
<div class="3colrow">
<!-- Left Column -->
<div class="col skills">
<hr>
<h3 data-i18n="basicskills">Basic Skills</h3>
<div class="table">
<span class="table-name">Basic Skills</span>
<div class="table-row">
<span class="table-header">0</span>
<span class="table-header">1</span>
<span class="table-header">2</span>
<span class="table-header">3</span>
<span class="table-header">4</span>
<span class="table-header">5</span>
<span class="table-header">6</span>
<span class="table-header">7</span>
<span class="table-header">8</span>
<span class="table-header">9</span>
<span class="table-header">10</span>
<span class="table-header">11</span>
<span class="table-header">12</span>
</div>
<div class="table-row">
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$0_basicskill}" class="dice" value="%{selected|repeating_basicskills_$0_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$1_basicskill}" class="dice" value="%{selected|repeating_basicskills_$1_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$2_basicskill}" class="dice" value="%{selected|repeating_basicskills_$2_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$3_basicskill}" class="dice" value="%{selected|repeating_basicskills_$3_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$4_basicskill}" class="dice" value="%{selected|repeating_basicskills_$4_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$5_basicskill}" class="dice" value="%{selected|repeating_basicskills_$5_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$6_basicskill}" class="dice" value="%{selected|repeating_basicskills_$6_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$7_basicskill}" class="dice" value="%{selected|repeating_basicskills_$7_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$8_basicskill}" class="dice" value="%{selected|repeating_basicskills_$8_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$9_basicskill}" class="dice" value="%{selected|repeating_basicskills_$9_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$10_basicskill}" class="dice" value="%{selected|repeating_basicskills_$10_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$11_basicskill}" class="dice" value="%{selected|repeating_basicskills_$11_basicskill}">t</button></span>
<span class="tdcs"><button type="roll" name="roll_repeating_" title="%{selected|repeating_basicskills_$12_basicskill}" class="dice" value="%{selected|repeating_basicskills_$11_basicskill}">t</button></span>
</div>
</div>
<hr> ...... the rest of the page continues from here.....
The issue from what I can see is that the bolded styles are simply not applying, and therefore not splitting the page into 3 seperate columns. If I add the style straight into the html, it does seem to work (mostly).
I understand that this isnt alot to go on, and the code is rather abbreviated. And I am sorry for that. I'm not very good at using github. Thank you in advance.
Also, I am aware that the repeating section has some issues, especially the excessive use of underscores "_" for the name. That being said, it works. (I don't know how it works considering the name isnt filled out completely; but it does). Unlike the attack/damage buttons, which simply dont work at all. Which is something I've been struggling with for a long time, and one of the reasons why I wanted to switch to CSE, to see if that would help get them to work.
I don't see a repeating section in the code (which starts with
<fieldset clss="repeating_
Extra underscore will break it if its on the line I just showed. Extra underscores do not matter on any other line of the repeating section - you can go wild.
To solcve your bold issue, I'd recommend posting the entire sheet code (HTML and CSS) in pastebin.com or gist.com. It's going to be hard to figure out CSS problems from just looking at a list of code.
I managed to figure out how to upload everything to github without using their stupid app program so.. thats cool. Anyways, here is the git link. https://github.com/TobyFox2002/DarkHeresyAdvanced. The character sheet is an amalgam of DH1e, some superior elements of 2e, and some elements of Rogue Trader. So essentially its a more advanced version of DH. Please keep in mind that this character sheet does require some API to handle the rolls, as the all the rolls are handled using SCRIPTCARDS. Any assistance, that can be rendered would be very much appreciated.
Eventually, I'll be converting all my character sheets to CSE, as I want to use variables in my CSS and create pop-out windows. Not to mention, I'd really like to have better accessibility.